<!-- pages/post/post.vue -->
<template>
	<view class="wrapper">
		<form @submit="handleSubmit">
			
			<view class="form-item">
				<text>动态内容:</text>
				<textarea name="content" placeholder="分享校园新鲜事..." />
			</view>
			
			<!-- 【新增】图片选择区 -->
			<view class="form-item">
				<text>添加图片 (可选):</text>
				<!-- 
				 1. v-if/v-else 控制显示 "加号" 还是 "预览图"
				 2. @click 绑定选图事件
				-->
				<view class="image-uploader">
					<view v-if="!imageTempPath" class="add-btn" @click="chooseImage">+</view>
					<image v-else class="preview-img" :src="imageTempPath" mode="aspectFill" @click="chooseImage"></image>
				</view>
			</view>

			<button type="primary" form-type="submit" :loading="isLoading">
				{{isLoading ? '发布中...' : '立即发布'}}
			</button>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const db = uniCloud.database();

const isLoading = ref(false);
const imageTempPath = ref(''); // 【新增】用于预览的"本地临时路径"

// 【新增】选图方法
const chooseImage = () => {
	uni.chooseImage({
		count: 1, // 只选 1 张
		sizeType: ['compressed'], // 压缩图片
		sourceType: ['album', 'camera'], // 相册或相机
		success: (res) => {
			// res.tempFilePaths[0] 就是选中的"本地临时路径"
			imageTempPath.value = res.tempFilePaths[0];
			console.log('选图成功:', imageTempPath.value);
		},
		fail: (err) => {
			console.error('选图失败:', err);
		}
	});
};

// 【修改】表单提交事件
const handleSubmit = async (e) => {
	const content = e.detail.value.content;
	if (!content && !imageTempPath.value) { // 内容和图片至少有一个
		uni.showToast({ title: '总得发点啥吧...', icon: 'none' });
		return;
	}
	
	isLoading.value = true;
	
	let cloudImageUrl = ''; // 准备存到数据库的"云地址"
	
	try {
		// 1. 【核心】如果选了图，先上传图片
		if (imageTempPath.value) {
			console.log('开始上传图片...');
			const uploadRes = await uniCloud.uploadFile({
				filePath: imageTempPath.value, // 本地临时路径
				cloudPath: `post_${Date.now()}.jpg`, // 在云端的"文件名"
				cloudPathAsUrl: true // 【重要】直接返回可访问的URL
			});
			
			// uploadRes.fileID 就是 "cloud://..." 或 "https://" 地址
			cloudImageUrl = uploadRes.fileID;
			console.log('上传成功, 云地址:', cloudImageUrl);
		}
		
		// 2. 无论是否传图，都"添加"数据到数据库
		console.log('开始写入数据库...');
		const res = await db.collection('campus-posts').add({
			content: content,
			image_url: cloudImageUrl, // 如果没传图，这里就是空字符串
			like_count: 0,
			publish_time: Date.now()
		});
		
		console.log('发布成功', res);
		
		// 3. 反馈与重置
		uni.showToast({ title: '发布成功！', icon: 'success' });
		imageTempPath.value = ''; // 清空预览图
		// (如果用 v-model 绑定 textarea，也可以在这里清空内容)
		
		// 4. 【友好】发布成功后，"通知"首页刷新
		uni.switchTab({
			url: '/pages/index/index',
			success: () => {
				// 触发首页的 onShow 事件，让它知道要刷新了
				uni.$emit('post-success');
			}
		});

	} catch (err) {
		console.error('发布失败', err);
		uni.showToast({ title: '发布失败，请重试', icon: 'error' });
	} finally {
		isLoading.value = false;
	}
};
</script>

<style>
/* ... 复用上节课的 .wrapper, .form-item, textarea 样式 ... */
.wrapper {
	padding: 15px;
}
.form-item {
	margin-bottom: 15px;
}
.form-item text {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}
.form-item textarea {
	width: 100%; height: 120px; padding: 10px;
	border: 1px solid #eee; border-radius: 5px;
	background-color: #fff; box-sizing: border-box;
}

/* 【新增】图片上传样式 */
.image-uploader {
	display: flex;
}
.add-btn {
	width: 80px;
	height: 80px;
	border: 2px dashed #ccc;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	color: #ccc;
	cursor: pointer;
}
.preview-img {
	width: 80px;
	height: 80px;
	border-radius: 5px;
}
</style>